<template>
  <div class="menu-list">
    <li
      v-for="(item, index) in state.menuList"
      :key="index"
      @click="handleClick(item)"
      :class="{ 'active': item.active }"
    >
      <div class="content-body">
        <img class="icon" :src="item.active ? item.onIcon : item.offIcon" />
        <div class="text" :class="{ 'active-text': item.active }">
          {{ item.name }}
        </div>
        <img class="active-icon" v-if="item.active" :src="activeIcon" />
      </div>
    </li>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { reactive, watch, onMounted } from 'vue'
import onIcon from '../assets/images/home/menu/onHome.svg'
import offBatch from '../assets/images/batch/offBatch.svg'
import offVoice from '../assets/images/voice/offVoice.svg'
import onVoice from '../assets/images/voice/onVoice.svg'
import offKey from '../assets/images/key/offKey.svg'
import onVue from '../assets/images/web/onVue.svg'
import offVue from '../assets/images/web/offVue.svg'
import onKey from '../assets/images/key/onKey.svg'
import offIp from '../assets/images/ip/offIp.svg'
import onIp from '../assets/images/ip/onIp.svg'
import offInfo from '../assets/images/info/offInfo.svg'
import onInfo from '../assets/images/info/onInfo.svg'
import offFile from '../assets/images/system/offFile.svg'
import offChange from '../assets/images/change/offChange.svg'
import onChange from '../assets/images/change/onChange.svg'
import onFile from '../assets/images/system/onFile.svg'
import onBatch from '../assets/images/batch/onBatch.svg'
import activeIcon from '../assets/images/home/menu/active.svg'
import offIcon from '../assets/images/home/menu/offHome.svg'
import offSubs from '../assets/images/subs/offSubs.svg'
import onSubs from '../assets/images/subs/onSubs.svg'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()
const route = useRoute()
const router = useRouter()

const menuItems = [
  {
    key: 'common.menu.text',
    onIcon: onIcon,
    offIcon: offIcon,
    path: '/home'
  },
  {
    key: 'common.menu.text2',
    onIcon: onBatch,
    offIcon: offBatch,
    path: "/batch",
  },
  {
    key: 'common.menu.text3',
    onIcon: onVoice,
    offIcon: offVoice,
    path: "/audio",
  },
  {
    key: 'common.menu.change',
    onIcon: onChange,
    offIcon: offChange,
    path: "/change",
  },
  {
    key: 'common.menu.subs',
    onIcon: onSubs,
    offIcon: offSubs,
    path: "/subs",
  },
  {
    key: 'common.menu.text4',
    onIcon: onKey,
    offIcon: offKey,
    path: "/key",
  },
  {
    key: 'common.menu.text5',
    onIcon: onIp,
    offIcon: offIp,
    path: "/ip-management",
  },
  {
    key: 'common.menu.text7',
    onIcon: onFile,
    offIcon: offFile,
    path: "/file",
  },
  {
    key: 'common.menu.text8',
    onIcon: onInfo,
    offIcon: offInfo,
    path: "/info",
  },
  {
    key: 'common.menu.text9',
    onIcon: onVue,
    offIcon: offVue,
    path: "/kpop",
  },
]

const state = reactive({
  menuList: []
})

// Initialize menu items with translations and active state
const initMenuItems = () => {
  state.menuList = menuItems.map(item => ({
    ...item,
    name: t(item.key),
    active: route.path.includes(item.path)
  }))
}

// Update active state based on current route
const updateActiveState = (path) => {
  state.menuList.forEach(item => {
    item.active = path.includes(item.path)
  })
}

// Update translations when locale changes
watch(locale, () => {
  state.menuList.forEach(item => {
    item.name = t(item.key)
  })
})

// Watch route changes to update active state
watch(
  () => route.path,
  (newPath) => {
    updateActiveState(newPath)
  }
)

// Initialize on component mount
onMounted(() => {
  initMenuItems()
})

const handleClick = (item) => {
  router.push(item.path)
}
</script>

<style lang="less" scoped>
.menu-list {
  width: 76px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 60px;
  height: 100%;

  li {
    list-style: none;
    display: flex;
    height: 50px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

    &.active {
      position: relative;
    }

    .content-body {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;  /* Add this to ensure consistent width */

      .icon {
        width: 44px;
        height: 44px;
        display: block;
        transition: all 0.3s ease;
      }

      .active-icon {
        position: absolute;
        display: block;
        top: 8px;
        left: -16px;
      }

      .text {
        text-align: center;
        font-family: PingFang SC, PingFang SC, serif;
        font-weight: 400;
        font-size: 12px;
        color: #9097a5;
        line-height: 14px;
        margin-top: 3px;
        transition: color 0.3s ease;
        width: 100%;       /* Add width constraint */
        overflow: hidden;  /* Handle text overflow */
        display: flex;     /* Use flexbox */
        justify-content: center; /* Center the text */
        word-break: keep-all; /* Prevent word breaking */

        &.active-text {
          color: #434AF9;
        }
      }
    }
  }
}
</style>
